<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>车辆信息</title>
{literal}
<style type="text/css">
body,html{height:100%; overflow:hidden; font-family:'微软雅黑'; font-size:16px;}
body,html,p,div,button,ul,ol,li,select{margin:0; padding:0; background-color:#eee;}
ul,ol{list-style:none;}
.main{width:85%; height:100%; margin:0 0 0 auto;}
.tab{ height:10%; position:relative;}
.tab ul{position:absolute; bottom:0;}
.tab ul li{float:left; width:100px; background-color:#cfcfcf; margin-right:8px; text-align:center; padding:4px; font-weight:bold; cursor:pointer;margin-bottom:-1px;}
.tab ul li.current{ background-color:#fff; color:#000; border:#d0d0d0 solid 1px; border-bottom:none; margin-bottom:-1px;}
.setction{width:100%; height:90%; background-color:#FFFFFF; display:none; overflow:auto;border:#d4d4d4 solid 1px; border-right:none; border-bottom:none;}
.setction label{display:block; width:200px; height:25px; line-height:25px; padding:2px 4px; background-color:#f1f1f1; border:#ccc solid 1px;}
.setction select{height:25px; line-height:25px}
.setction.current{display:block; z-index:99;}

.setction table {margin:8px auto; border:#F2F2F2 solid 6px;background-color:#D8D8D8; width:94%;}
.setction table td{ border-bottom:#f1f1f1 dotted 1px;}
.setction table td input{ height:30px; line-height:30px; width:100px;}
</style>
{/literal}
<script language="javascript" type="text/javascript" src="ui/ui/js/jquery.js"></script>
</head>
<body>
<div class="main">
	<div class="tab">
    	<ul>
        	<li class="current">基本信息</li><li>T服务合同</li><li>保险信息</li><li>安防密码</li>
        </ul>
    </div>
<div class="setction current" id="vhlInfo">
  <table border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="103" height="50" align="center">车辆号码</td>
    <td width="761"><label>LSJA16E31AG021387</label></td>
  </tr>
  <tr>
    <td width="103" height="50" align="center">车辆颜色</td>
    <td><label>银白</label></td>
  </tr>
  <tr>
    <td width="103" height="50" align="center">车牌号码</td>
    <td><label class="edit">京P0ST</label></td>
  </tr>
  <tr>
    <td width="103" height="50" align="center">车辆品牌</td>
    <td><label>东风标致</label></td>
  </tr>
  <tr>
    <td width="103" height="50" align="center">车辆系列</td>
    <td><label>2012款标致508</label></td>
  </tr>
  <tr>
    <td width="103" height="50" align="center">车辆型号</td>
    <td><label>标致508</label></td>
  </tr>
  <tr>
    <td height="50" colspan="2" align="center"><input type="button" class="edit" value="编辑" />
      <input type="button" class="save" value="保存" id="saveVHL"/>
      </td>
    </tr>
</table>
  </div>
  <div class="setction">
  	<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="15%" height="40" align="center">服务合同号码</td>
    <td>000-3579-431</td>
  </tr>
  <tr>
    <td height="40" align="center">合同生效日期</td>
    <td>2010-01-01</td>
  </tr>
  <tr>
    <td height="40" align="center">合同终止日期</td>
    <td>2011-01-01</td>
  </tr>
  <tr>
    <td height="40" align="center">合同通信套餐</td>
    <td>基本通信套餐包</td>
  </tr>
</table>

<table border="0" cellspacing="0" cellpadding="0" class="serviceList">
  <tr>
    <td height="40" colspan="3" align="left" valign="middle"><strong>合同包含T服务列表</strong></td>
    </tr>
  <tr>
    <td width="15%" height="40" align="center"><strong>名称</strong></td>
    <td width="10%" height="40" align="center"><strong>次数</strong></td>
    <td height="40" align="left"><strong>说明</strong></td>
  </tr>
 
  
</table>


  </div>
  <div class="setction">
  <table border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="103" height="50" align="center">保险公司名称</td>
    <td width="761"><select id="u1112" data-label="保险公司名称" disabled="disabled" class="edit">
<option value="中国人民保险集团公司&nbsp;">中国人民保险集团公司&nbsp;</option>
<option value="中国保险（控股）有限公司">中国保险（控股）有限公司</option>
<option value="中国人寿保险（集团）公司&nbsp;">中国人寿保险（集团）公司&nbsp;</option>
<option value="中国再保险（集团）公司&nbsp;">中国再保险（集团）公司&nbsp;</option>
<option value="中国太平洋保险（集团）股份有限公司">中国太平洋保险（集团）股份有限公司</option>
<option value="中国平安保险（集团）股份有限公司&nbsp;">中国平安保险（集团）股份有限公司&nbsp;</option>
<option value="中华联合保险控股股份有限公司&nbsp;">中华联合保险控股股份有限公司&nbsp;</option>
<option value="阳光保险控股股份有限公司&nbsp;">阳光保险控股股份有限公司&nbsp;</option>
<option value="中国出口信用保险公司&nbsp;">中国出口信用保险公司&nbsp;</option>
<option value="中国人民财产保险股份有限公司&nbsp;">中国人民财产保险股份有限公司&nbsp;</option>
<option value="中国人寿财产保险股份有限公司&nbsp;">中国人寿财产保险股份有限公司&nbsp;</option>
<option value="中国大地财产保险股份有限公司&nbsp;">中国大地财产保险股份有限公司&nbsp;</option>
<option value="太平保险有限公司&nbsp;">太平保险有限公司&nbsp;</option>
<option value="中国太平洋财产保险股份有限公司">中国太平洋财产保险股份有限公司</option>
<option value="中国平安财产保险股份有限公司&nbsp;">中国平安财产保险股份有限公司&nbsp;</option>
<option value="天安保险股份有限公司&nbsp;">天安保险股份有限公司&nbsp;</option>
<option value="大众保险股份有限公司&nbsp;">大众保险股份有限公司&nbsp;</option>
<option value="华泰财产保险股份有限公司&nbsp;">华泰财产保险股份有限公司&nbsp;</option>
<option value="永安财产保险股份有限公司&nbsp;">永安财产保险股份有限公司&nbsp;</option>
<option value="中银保险有限公司&nbsp;&nbsp;&nbsp;">中银保险有限公司&nbsp;&nbsp;&nbsp;</option>
<option value="华安财产保险股份有限公司&nbsp;">华安财产保险股份有限公司&nbsp;</option>
<option value="阳光财产保险股份有限公司&nbsp;&nbsp;">阳光财产保险股份有限公司&nbsp;&nbsp;</option>
<option value="永诚财产保险股份有限公司&nbsp;">永诚财产保险股份有限公司&nbsp;</option>
<option value="渤海财产保险股份有限公司&nbsp;&nbsp;">渤海财产保险股份有限公司&nbsp;&nbsp;</option>
<option value="安邦财产保险股份有限公司&nbsp;">安邦财产保险股份有限公司&nbsp;</option>
<option value="都邦财产保险股份有限公司&nbsp;">都邦财产保险股份有限公司&nbsp;</option>
<option value="民安保险（中国）有限公司&nbsp;">民安保险（中国）有限公司&nbsp;</option>
<option value="华农财产保险股份有限公司&nbsp;&nbsp;">华农财产保险股份有限公司&nbsp;&nbsp;</option>
<option value="中华联合财产保险股份有限公司">中华联合财产保险股份有限公司</option>
<option value="阳光农业相互保险公司&nbsp;&nbsp;&nbsp;">阳光农业相互保险公司&nbsp;&nbsp;&nbsp;</option>
<option value="安诚财产保险股份有限公司&nbsp;">安诚财产保险股份有限公司&nbsp;</option>
<option value="美国美亚保险公司上海分公司&nbsp;&nbsp;">美国美亚保险公司上海分公司&nbsp;&nbsp;</option>
<option value="天平汽车保险股份有限公司&nbsp;">天平汽车保险股份有限公司&nbsp;</option>
<option value="美国美亚保险公司广州分公司&nbsp;">美国美亚保险公司广州分公司&nbsp;</option>
<option value="上海安信农业保险股份有限公司&nbsp;">上海安信农业保险股份有限公司&nbsp;</option>
<option value="美国美亚保险公司深圳分公司">美国美亚保险公司深圳分公司</option>
<option value="安华农业保险股份有限公司&nbsp;">安华农业保险股份有限公司&nbsp;</option>
<option value="美国美亚保险公司佛山分公司&nbsp;&nbsp;">美国美亚保险公司佛山分公司&nbsp;&nbsp;</option>
<option value="美国联邦保险股份有限公司上海分公司&nbsp;">美国联邦保险股份有限公司上海分公司&nbsp;</option>
<option value="爱和谊保险公司天津分公司&nbsp;&nbsp;&nbsp;">爱和谊保险公司天津分公司&nbsp;&nbsp;&nbsp;</option>
<option value="利宝互助保险公司&nbsp;">利宝互助保险公司&nbsp;</option>
<option value="丰泰保险（亚洲）有限公司&nbsp;&nbsp;">丰泰保险（亚洲）有限公司&nbsp;&nbsp;</option>
<option value="日本东京海上日动火灾保险株式会社&nbsp;">日本东京海上日动火灾保险株式会社&nbsp;</option>
<option value="苏黎世保险公司北京分公司&nbsp;&nbsp;">苏黎世保险公司北京分公司&nbsp;&nbsp;</option>
<option value="三井住友海上火灾保险有限公司">三井住友海上火灾保险有限公司</option>
<option value="皇家太阳联合保险公司">皇家太阳联合保险公司</option>
<option value="日本财产保险（中国）有限公司（大连）">日本财产保险（中国）有限公司（大连）</option>
<option value="三星火灾海上保险（中国）有限公司">三星火灾海上保险（中国）有限公司</option>
<option value="现代财产保险（中国）有限公司">现代财产保险（中国）有限公司</option>
<option value="法国安盟保险公司&nbsp;&nbsp;">法国安盟保险公司&nbsp;&nbsp;</option>
<option value="安联保险公司">安联保险公司</option>
<option value="中意财产保险有限公司&nbsp;">中意财产保险有限公司&nbsp;</option>
<option value="中国人寿保险股份有限公司">中国人寿保险股份有限公司</option>
<option value="新华人寿保险股份有限公司">新华人寿保险股份有限公司</option>
<option value="中国平安人寿保险股份有限公司">中国平安人寿保险股份有限公司</option>
<option value="泰康人寿保险股份有限公司&nbsp;">泰康人寿保险股份有限公司&nbsp;</option>
<option value="中国太平洋人寿保险股份有限公司">中国太平洋人寿保险股份有限公司</option>
<option value="生命人寿保险股份有限公司&nbsp;&nbsp;">生命人寿保险股份有限公司&nbsp;&nbsp;</option>
<option value="太平人寿保险有限公司">太平人寿保险有限公司</option>
<option value="东方人寿保险股份有限公司&nbsp;">东方人寿保险股份有限公司&nbsp;</option>
<option value="民生人寿保险股份有限公司">民生人寿保险股份有限公司</option>
<option value="合众人寿保险股份有限公司">合众人寿保险股份有限公司</option>
<option value="华泰人寿保险股份有限公司">华泰人寿保险股份有限公司</option>
<option value="信泰人寿保险股份有限公司&nbsp;">信泰人寿保险股份有限公司&nbsp;</option>
<option value="长城人寿保险股份有限公司">长城人寿保险股份有限公司</option>
<option value="中国人寿保险(海外)股份有限公司&nbsp;">中国人寿保险(海外)股份有限公司&nbsp;</option>
<option value="嘉禾人寿保险股份有限公司">嘉禾人寿保险股份有限公司</option>
<option value="中国人民健康保险股份有限公司&nbsp;&nbsp;">中国人民健康保险股份有限公司&nbsp;&nbsp;</option>
<option value="正德人寿保险股份有限公司">正德人寿保险股份有限公司</option>
<option value="平安健康保险股份有限公司&nbsp;&nbsp;">平安健康保险股份有限公司&nbsp;&nbsp;</option>
<option value="华夏人寿保险股份有限公司">华夏人寿保险股份有限公司</option>
<option value="瑞福德健康保险股份有限公司&nbsp;">瑞福德健康保险股份有限公司&nbsp;</option>
<option value="昆仑健康保险股份有限公司">昆仑健康保险股份有限公司</option>
<option value="美国友邦保险有限公司上海分公司&nbsp;&nbsp;">美国友邦保险有限公司上海分公司&nbsp;&nbsp;</option>
<option value="平安养老保险股份有限公司">平安养老保险股份有限公司</option>
<option value="美国友邦保险有限公司广州分公司&nbsp;&nbsp;">美国友邦保险有限公司广州分公司&nbsp;&nbsp;</option>
<option value="太平养老保险股份有限公司">太平养老保险股份有限公司</option>
<option value="美国友邦保险有限公司深圳分公司&nbsp;&nbsp;">美国友邦保险有限公司深圳分公司&nbsp;&nbsp;</option>
<option value="中国人寿养老保险股份有限公司">中国人寿养老保险股份有限公司</option>
<option value="美国友邦保险有限公司佛山支公司&nbsp;&nbsp;">美国友邦保险有限公司佛山支公司&nbsp;&nbsp;</option>
<option value="长江养老保险股份有限公司">长江养老保险股份有限公司</option>
<option value="美国友邦保险有限公司北京分公司">美国友邦保险有限公司北京分公司</option>
<option value="美国友邦保险有限公司苏州分公司">美国友邦保险有限公司苏州分公司</option>
<option value="海康人寿保险有限公司&nbsp;&nbsp;">海康人寿保险有限公司&nbsp;&nbsp;</option>
<option value="美国友邦保险有限公司江门分公司">美国友邦保险有限公司江门分公司</option>
<option value="中美大都会人寿保险有限公司&nbsp;&nbsp;">中美大都会人寿保险有限公司&nbsp;&nbsp;</option>
<option value="美国友邦保险有限公司东莞支公司">美国友邦保险有限公司东莞支公司</option>
<option value="招商信诺人寿保险有限公司&nbsp;">招商信诺人寿保险有限公司&nbsp;</option>
<option value="太平洋安泰人寿保险有限公司">太平洋安泰人寿保险有限公司</option>
<option value="海尔纽约人寿保险有限公司">海尔纽约人寿保险有限公司</option>
<option value="恒康天安人寿保险有限公司">恒康天安人寿保险有限公司</option>
<option value="联泰大都会人寿保险有限公司">联泰大都会人寿保险有限公司</option>
<option value="中宏人寿保险有限公司">中宏人寿保险有限公司</option>
<option value="信诚人寿保险有限公司&nbsp;&nbsp;">信诚人寿保险有限公司&nbsp;&nbsp;</option>
<option value="光大永明人寿保险有限公司">光大永明人寿保险有限公司</option>
<option value="中英人寿保险有限公司&nbsp;">中英人寿保险有限公司&nbsp;</option>
<option value="安联大众人寿保险有限公司">安联大众人寿保险有限公司</option>
<option value="恒安标准人寿保险有限公司&nbsp;&nbsp;">恒安标准人寿保险有限公司&nbsp;&nbsp;</option>
<option value="金盛人寿保险有限公司">金盛人寿保险有限公司</option>
<option value="中保康联人寿保险有限公司&nbsp;">中保康联人寿保险有限公司&nbsp;</option>
<option value="中法人寿保险有限责任公司">中法人寿保险有限责任公司</option>
<option value="中意人寿保险有限公司&nbsp;">中意人寿保险有限公司&nbsp;</option>
<option value="广电日生保险有限公司">广电日生保险有限公司</option>
<option value="中新大东方人寿保险有限公司&nbsp;&nbsp;">中新大东方人寿保险有限公司&nbsp;&nbsp;</option>
<option value="首创安泰人寿保险股份有限公司">首创安泰人寿保险股份有限公司</option>
<option value="信泰人寿保险股份有限公司&nbsp;">信泰人寿保险股份有限公司&nbsp;</option>
<option value="瑞泰人寿保险有限公司">瑞泰人寿保险有限公司</option>
<option value="英大泰和人寿保险股份有限公司&nbsp;">英大泰和人寿保险股份有限公司&nbsp;</option>
<option value="国泰人寿保险有限责任公司">国泰人寿保险有限责任公司</option>
<option value="中国人民人寿保险股份有限公司&nbsp;&nbsp;">中国人民人寿保险股份有限公司&nbsp;&nbsp;</option>
<option value="中航三星人寿保险有限公司">中航三星人寿保险有限公司</option>
<option value="国华人寿保险股份有限公司">国华人寿保险股份有限公司</option>
<option value="幸福人寿保险股份有限公司">幸福人寿保险股份有限公司</option>
<option value="泰康养老保险股份有限公司&nbsp;&nbsp;">泰康养老保险股份有限公司&nbsp;&nbsp;</option>
<option value="阳光人寿保险股份有限公司&nbsp;">阳光人寿保险股份有限公司&nbsp;</option>
<option value="中国人寿保险股份有限公司">中国人寿保险股份有限公司</option>
<option value="慕尼黑再保险公司">慕尼黑再保险公司</option>
<option value="中国人寿再保险股份有限公司&nbsp;">中国人寿再保险股份有限公司&nbsp;</option>
<option value="劳合社">劳合社</option>
<option value="瑞士再保险公司&nbsp;Swiss&nbsp;Re">瑞士再保险公司&nbsp;Swiss&nbsp;Re</option>
<option value="中国财产再保险股份有限公司">中国财产再保险股份有限公司</option>
<option value="德国科隆再保险公司&nbsp;">德国科隆再保险公司&nbsp;</option>
<option value="其他">其他</option>
</select></td>
  </tr>
  <tr>
    <td width="103" height="50" align="center">保险合同单号</td>
    <td><label>CX1000098</label></td>
  </tr>
  <tr>
    <td width="103" height="50" align="center">保险终止日期</td>
    <td><label>2011-01-01</label></td>
  </tr>
  <tr>
    <td width="103" height="50" align="center">保险客服电话</td>
    <td><label>40088-95512</label></td>
  </tr>
  <tr>
    <td height="50" colspan="2" align="center"><input type="button" class="edit" value="编辑" />
      <input type="submit" class="save" value="保存" /></td>
    </tr>
</table>
  </div>
  <div class="setction">
  <table border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="150" height="50" align="center">输入原安防密码</td>
    <td width="761"><label class="edit" id='oldpin'></label></td>
  </tr>
  <tr>
    <td width="150" height="50" align="center">设置新安防密码</td>
    <td><label class="edit"  id='newpin'></label></td>
  </tr>
  <tr>
    <td width="150" height="50" align="center">确认新安防密码</td>
    <td><label class="edit" id='newpin2'></label></td>
  </tr>
  <tr>
    <td height="50" colspan="2" align="center">
      <input type="submit" class="save" value="保存"  id="saveVIN" /></td>
    </tr>
</table>
  </div>
</div>
</body>
</html>
{literal}
<script language="javascript" type="text/javascript">
	var _data = {};
	getVhlInfo();
	$("#saveVHL").on('click',function(){
			var _this = $(this).parents('.setction:first');
			var data = _data.vhl;
			data.license = $('label:eq(2)',_this).html();
			var info = '';
			for( var p in data ){info += p+':"'+data[p]+'"';}
			$.ajax({url:'?path=vhlInfo&action=vhlInfo&method=updateVehicle',data:"{"+info+"}",type:'POST',contentType:"json",success:function(ret){
					if( ret.status.code == 200 ){
						alert('保存成功.');	
					}
				},error:function(msg){
					alert(msg);	
				}});
		});
		
		$("#saveVIN").on('click',function(){
		
		var opin =$('#oldpin').html();
		var pin =$('#newpin').html();
		var pin2 =$('#newpin2').html();
		
		if(!pin || !opin || !pin2){
			alert('pin码不能为空!');
			return false;
			}else if(pin!=pin2){
				alert("两次输入的pin码不一致！");
				return false;
				}
		
			$.ajax({url:'?path=vhlInfo&action=vhlInfo&method=updatepin'+"&opin="+opin+"&pin="+pin+"&pin2="+pin2,data:"{"+pin+"}",type:'get',contentType:"json",success:function(ret){
					if( ret.status.code == 300 ){
						$('#newpin2').html('');
						$('#newpin').html('');
						$('#oldpin').html('');
						alert('保存成功.');	
					}
				},error:function(msg){
					alert(msg);	
				}});
		});
	
	$(".setction").on('click',function(e){
		var _this = this;
		var _t = $(e.target || e.srcElement);
		if( _t.hasClass('edit') ){
			$('label.edit',this).attr('contenteditable',true).css('border','#009933 solid 1px');
			$('select.edit',this).attr('disabled',false);
		}
	});
	
	$(".tab").on('click',function(e){
		var _t = $(e.target || e.srcElement);
		var _index = _t.index();
		var _class = 'current';
		if( _t.get(0).tagName != 'LI' ){return ;}
		$(this).find('li.'+_class).removeClass(_class);
		_t.addClass(_class);
		if( $(".setction").get(_index) ){
			$(".setction."+_class).removeClass(_class);
			$($(".setction").get(_index)).addClass(_class);
		}
	});
	function getVhlInfo(){
		$.ajax({url:'?path=vhlInfo&action=vhlInfo&method=getVehicleInfo',data:{},type:'GET',contentType:"json",success: function(ret){
				var _this = $(".setction:eq(0)");
				if( ret.status.code == 200 ){
					_data.vhl = ret.VehicleInfo;
					var _t = $('label',_this);
					$(_t.get(0)).html(ret.VehicleInfo.vin);
					$(_t.get(1)).html(ret.VehicleInfo.color);
					$(_t.get(2)).html(ret.VehicleInfo.license);
					$(_t.get(3)).html(ret.VehicleInfo.brand);
					$(_t.get(4)).html(ret.VehicleInfo.car);
					$(_t.get(5)).html(ret.VehicleInfo.models);
				}else{
					alert(ret.status.description);	
				}
			},error: function(msg){
				alert(msg);	
			}});
	}
	function getContract(){
		$.ajax({url:'?path=vhlInfo&action=vhlInfo&method=getContractInfo',data:{},type:'GET',contentType:"json",success: function(ret){
				var _this = $(".setction:eq(1)");
				
				if( ret.resultVo.contract.id){
					var _t = $('td',_this);
					$(_t.get(1)).html(ret.resultVo.servicePkg.id);
					$(_t.get(3)).html(ret.resultVo.servicePkg.packBeginTime);
					$(_t.get(5)).html(ret.resultVo.servicePkg.packEndTime);
					$(_t.get(7)).html(ret.resultVo.servicePkg.name);
					
					var serlist = (ret.resultVo.serviceList);
					
					var _list = $('.serviceList tbody');
					
					var _tr = $('tr',_list);
					
					_list.html(_list.html()+'<tr><td height="40" align="center">'+serlist[0].name+'</td><td align="center">'+serlist[0].serviceCount+'</td>	<td align="left">'+serlist[0].descript+'</td></tr>');	
					
					for(var i in serlist){
					_list.html(_list.html()+'<tr><td height="40" align="center">'+serlist[i].name+'</td><td align="center">'+serlist[i].serviceCount+'</td><td align="left">'+serlist[i].descript+'</td></tr>');	
					}
					
				}else{
					alert(ret.status.description);	
				}
			},error: function(msg){
				alert(msg);	
			}});
	}
	getContract();
</script>
{/literal}